<script>
import { defineComponent } from 'vue'
import { useObservable } from '@vueuse/rxjs'
import { liveQuery } from 'dexie'
import db from '@/db'
import { mapState } from 'vuex'

export default defineComponent({
  name: 'AppFooter',
  data() {
  },
  methods: {
  },
  computed: {
    ...mapState({
      sync: state => state.sync,
    }),
  },
  setup() {
    return {
      user: useObservable(
        liveQuery(() => db.user.get({ isCurrent: 1 })),
      ),
    }
  },
})
</script>

<template>
  <v-footer
    app="true"
    :elevation="2"
    color="teal-lighten-2"
  >
    <v-row
    >
      <v-col
        class="d-flex align-center justify-start"
        cols="12"
        v-if="sync.isProcessing"
      >
        <v-progress-linear
          model-value="20 / 120"
          color="pink-lighten-2"
          indeterminate="true"
          absolute="true"
          bottom
        ></v-progress-linear>
        <span> {{ sync.queueSize }} chats syncing... Search by titles now, full content soon.</span>
      </v-col>
      <v-col
        class="d-flex align-center justify-start"
        cols="12"
        v-else
      >
        <p>
          <v-icon icon="mdi-account-sync"></v-icon>
          <span class="text-caption"> ChatGPT via: {{ user?.email }}</span>
        </p>
      </v-col>
    </v-row>
  </v-footer>
</template>

<style scoped>

</style>
